<template>
  <div>
    <table border="2">
      <caption>
        欢迎光临_vue开发的收银系统_水果店
      </caption>
      <tr>
        <td><b>苹果10￥/斤，折扣 : 8折</b></td>
      </tr>
      <tr>
        <td>
          请输入你要购买的斤数<input type="text" v-model.trim.number="val" />
        </td>
      </tr>
      <tr>
        <td><button @click="btn">结账买单~</button></td>
      </tr>
      <tr v-show="isShow">
        <td>
          结账单：总价{{ num1 }}￥元 折后价：{{ num2 }}￥元 省了：{{ num3 }}￥元
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      val: '',
      num1: '',
      num2: '',
      num3: '',
      isShow: false,
    }
  },
  methods: {
    btn() {
      this.num1 = this.val * 10
      this.num2 = this.val * 8
      this.num3 = this.num1 - this.num2
      this.isShow = true
    },
  },
}
</script>

<style>
table {
  width: 600px;
  border-color: #ccc;
  text-align: center;
}
</style>
